<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>开始时间、截止时间</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <style>
        body{margin:0;padding:0;outline: 0;font-family: sans-serif;}
        /* 日期选择器 */
        .date_picker{width:100%;padding:20px;position: relative;box-sizing: border-box;font-family: sans-serif;}
        .date_picker .calendar{width:252px;margin: auto;background-color: #fff;display: flex;flex-direction: column;border-radius: 6px;border: 0 solid transparent;box-shadow: 0 2px 20px rgba(0,0,0,0.1);}
        .calendar .calendar_datetime{display: flex;justify-content: space-around;text-align: center;padding: 4px 0;margin: 16px 16px 0;border:1px solid #e5e5e5;border-radius:5px;}
        .calendar_datetime input{width:80px;border:0;outline:0;padding:0 12px;font-size: 15px;}
        .calendar_datetime #endDate{border-left:1px solid #e5e5e5;}
        .calendar .calendar_tle{display: flex;justify-content: space-around;align-items: center;padding:0 16px;margin-top: 8px;}
        .calendar_tle #yearMonth{display: inline-flex;padding: 5px 0;}
        .calendar_tle .prev:before {content: "<";}
        .calendar_tle .next:before {content: ">";}
        .calendar_tle .prev,.next{display: inline-flex;line-height:32px;font-size: 22px;cursor: pointer;}
        .calendar .calendar_body{padding-bottom: 16px;}
        .calendar_body .date_list{list-style: none;display: flex;margin: 0 7px;padding: 0;}
        .calendar_body .date_list ul{width:100%;padding-left:0;margin:0;font-weight:bold;font-size:14px;}
        .calendar_body .date_list ul li{display:inline-block;list-style:none;width:32px;line-height:32px;margin: 1px;text-align:center;box-sizing:border-box;border-radius: 3px;}
        .calendar_body #days li:hover{background:#ccc;cursor: pointer}
        .calendar_body .before_day{color:#a8a8a8;}
        .calendar_body .to_day{color:#6ac13c;background-color: #e9f8df;}
        .calendar_body .after_day{color:#565656;}
        .calendar_body .active_startDate{background-color: #1b9aee;color: #f7f7f7;pointer-events:none;cursor:not-allowed;box-shadow:none;}
        .calendar_body .active_endDate{background-color: #d51d27;color: #f7f7f7;pointer-events:none;cursor:not-allowed;box-shadow:none;}
        .calendar .calendar_btn{display:flex;justify-content:space-between;padding: 0 16px 16px;}
        .calendar_btn .clear_date,.sure_date{flex:1;text-align:center;padding:6px 20px;font-size:14px;border-radius: 5px;cursor: pointer;transition: all 0.3s ease;}
        .calendar_btn .clear_date{background-color:#fff;color:#1b9aee;border:1px solid #ccecff;}
        .calendar_btn .sure_date{margin-left: 16px;background-color:#1b9aee;color:#fff;border:0 solid transparent}
        .calendar_btn .clear_date:hover{background-color:#f2fbff;}
        .calendar_btn .sure_date:hover{background-color:#0171c2;}
        .calendar_body .empty{display:inline-block;width:34px}
    </style>
</head>
<body>
    <div>
        <div class="date_picker">
            <div class="calendar">
                <div class="calendar_datetime">
                    <input id="startDate" placeholder="开始时间">
                    <input id="endDate" placeholder="截止时间">
                </div>
                <div class="calendar_tle">
                    <span class="prev" id="prev"></span>
                    <span id="yearMonth"></span>
                    <span class="next" id="next"></span>
                </div>
                <div class="calendar_body">
                    <div class="date_list">
                        <ul>
                            <li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li><li>日</li>
                        </ul>
                    </div>
                    <div class="date_list">
                        <ul id="days"></ul>
                    </div>
                </div>
                <div class="calendar_btn">
                    <div class="clear_date">清除</div>
                    <div class="sure_date">确定</div>
                </div>
            </div>
        </div>
        <div id="show" style="text-align: center;"></div>
    </div>
</body>
<script>
     $(document).ready(function() {
        const today = new Date();
        let currentYear = today.getFullYear();
        let currentMonth = today.getMonth();
        const currentDay = today.getDate();
        const toDate = getDate(currentYear, currentMonth, currentDay);
         // 生成日历 yyyy-mm-dd
        function getDate(year, month, day) {
            const selectedDate = new Date(year, month, day);
            return `${selectedDate.getFullYear()}-${String(selectedDate.getMonth() + 1).padStart(2, '0')}-${String(selectedDate.getDate()).padStart(2, '0')}`;
        }
        function generateCalendar(year, month) {
            const daysInMonth = new Date(year, month + 1, 0).getDate();
            const firstDay = new Date(year, month, 1).getDay();
            const calendarDays = [];
            // 空白节点的字符串
            if (firstDay === 0) {
                calendarDays.push(Array(6).fill('<span class="empty"></span>').join(''));
            } else if (firstDay > 0 && firstDay <= 7) {
                calendarDays.push(Array(firstDay - 1).fill('<span class="empty"></span>').join(''));
            }
            const startDate = $('#startDate').val();
            const endDate = $('#endDate').val();
            for (let day = 1; day <= daysInMonth; day++) {
                const date = getDate(currentYear, currentMonth, day); // 创建日期的 Date 对象
                const isBefore = date < today;
                const isToday = date === toDate;
                const isAfter = date > today;
                const classList = ['day']
                    .concat(isBefore ? 'before_day' : [])
                    .concat(isToday ? 'to_day' : [])
                    .concat(isAfter ? 'after_day' : [])
                    .concat(startDate === date ? 'active_startDate' : [])
                    .concat(endDate === date ? 'active_endDate' : []);
                calendarDays.push(`<li class="${classList.join(' ')}" data-date='${date}'>${day}</li>`);
            }
            return calendarDays.join('');
        }
        function updateCalendar() {
            const daysHtml = generateCalendar(currentYear, currentMonth);
            $('#days').html(daysHtml);
            $('#yearMonth').text(`${currentYear}年 ${currentMonth + 1}月`);
        }
        function selectDate(element) {
            const selectedDay = $(element).text();
            const formattedDate = getDate(currentYear, currentMonth, selectedDay);
            if ($('#startDate').val() === '') {
                $('#startDate').val(formattedDate);
                $('#days li').removeClass('active_startDate');
                $(element).addClass('active_startDate');
            } else if ($('#endDate').val() === '') {
                if (formattedDate < $('#startDate').val()) {
                    alert('结束日期不能早于开始日期！');
                    return;
                }
                $('#endDate').val(formattedDate);
                $(element).addClass('active_endDate');
            }
        }
        $('#prev, #next').click(function() {
            currentMonth += $(this).is('#prev') ? -1 : 1;
            if (currentMonth < 0) {
                currentMonth = 11;
                currentYear--;
            } else if (currentMonth > 11) {
                currentMonth = 0;
                currentYear++;
            }
            updateCalendar();
        });
        $('#days').on('click', 'li.day', function() {
            selectDate(this);
        });
        $('.clear_date').click(function() {
            $('#startDate, #endDate').val('');
            $('#days li').removeClass('active_startDate active_endDate');
            $('#show').text('');
        });
        $('.sure_date').click(function() {
            const startDate = $('#startDate').val();
            const endDate = $('#endDate').val();
            if (startDate && endDate) {
                $('#show').text(`${startDate} 至 ${endDate}`);
            } else {
                alert('请选择完整的日期范围！');
            }
        });
        updateCalendar();
    });
</script>
</html>